<template>
    <div id="map01"></div>
</template>

<script>
    export default {
        name: "UserAdminMyData-map01",
        data(){
            return{
                baseURL:'http://localhost:8081/userAdmin/getPublishData',
            }
        },
        mounted(){
            this.axios.post(this.baseURL).then(res=>{
                this.$echarts.init(document.getElementById('map01')).setOption({
                    title:{
                        text:this.$t('userAdmin.data.map01.title'),
                        left:"50px"
                    },
                    tooltip:{
                        trigger:"axis",
                        axisPointer:{
                            type:"shadow"
                        }
                    },
                    legend:{
                        top:"25px",
                        data:this.$t('userAdmin.data.map01.legendData')
                    },
                    xAxis:{
                        type:"category",
                        data:this.$t('userAdmin.data.map01.xAxisData')
                    },
                    yAxis:{
                        type:"value"
                    },
                    series:[
                        {
                            name:this.$t('userAdmin.data.map01.series.block01.name'),
                            type:"bar",
                            stack:this.$t('userAdmin.data.map01.series.block01.stack'),
                            data:[res.data[0].errorCount,res.data[0].questionCount,res.data[0].blinkCount]
                        },
                        {
                            name:this.$t('userAdmin.data.map01.series.block02.name'),
                            type:"bar",
                            stack:this.$t('userAdmin.data.map01.series.block02stack'),
                            data:[res.data[1].errorCount,res.data[1].questionCount,res.data[1].blinkCount]
                        }
                    ]
                })
            }).catch(
                exception=>{
                    console.log(exception)
                }
            )
        }
    }
</script>

<style scoped>
  #map01{
    width: 100%;
    height: 365px;
    position: absolute;
    top: 120px;
  }
</style>
